<template>
    <div>
        <BreadCrumb />
        <div class="newAddTitle"><i class=" iconfont icon-hangye"></i> 行业 &nbsp;{{csaeName}}</div>
        <div id="caseInfos">
            <div class="content-box">
                <p class="tips">提示：系统中案例为企业真实案例场景介绍，对案例的具体学习请前往实训平台</p>
                <div class="admin-index-list content-box" v-if="caseslists.length>0">
                    <el-row :gutter="60">
                        <el-col :md="6" v-for='(item ,index) in caseslists' :key="index">
                            <div class="admin-lisitem" >
                                <router-link  :to="{ path: '/Teaching/CasePresentationDetail',query: {id: item.caseId,caseTitle: item.caseTitle}}">
                                    <div class="admin-list-img">
                                        <h3 class="titlle">{{item.caseTitle}}</h3>
                                        <p class="caseIntro">{{item.caseIntro}}</p>
                                        <img :src="item.file" />
                                    </div>
                                </router-link>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-else class="emptyList">
                    <img src="../../assets/images/empty.png"/>
                    <p>暂无数据~</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BreadCrumb from "@/components/BreadCrumb.vue"
    export default {
        components: {
            BreadCrumb
        },
        data() {
            return {
                id:'',
                casename:'',
                caseslists:[],
                //首页传递
                csaeName:''
            }
        },
        mounted () {
            this.id = this.$route.query.id
            this.csaeName = this.$route.query.csaeName
            //console.log( this.csaeName,123)
            this.init()
        },
        methods:{
             init(){
                let self = this
                self.$http.get('/tes/business/case/caseList?businessCaseId=' + this.id).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.caseslists  = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                })
             }
        }
    }
</script>

<style lang="scss" scoped>
    @import "./../../styles/layout/color_variables";
    .newAddTitle{
        width: $width;
        margin: 20px auto;
        color: #385899;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        height: 60px;
        line-height: 60px;
        text-indent: 30px;
        font-weight: bold;
        font-size: 15px;
    }
    #caseInfos{
        width: $width;
        margin: 20px auto;
        color: #727272;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        .content-box{
            padding-top: 10px;
            .tips{
                padding: 24px 30px 0 44px;
                color: #adadad;
            }
        }
        .admin-index-list {
            margin: 35px 30px;
            padding:0 30px;
            .admin-wrong-box {
                .icon-Group-{
                    color: $title-gray;
                    font-size: $fs18;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    cursor: pointer;
                }
            }
            .admin-add {
                height: 280px;
                border-radius: 6px;
                background: #fff;
                border: 1px dashed #4b98f0;
                text-align: center;
                line-height: 280px;
                font-size: 35px;
                color: #4b98f0;
                cursor: pointer;
                box-shadow: 0px 7px 25px #eaeaea
            }
            .admin-lisitem {
                height: 280px;
                background: #fff;
                border-radius: 6px;
                position: relative;
                -webkit-transition: .3s transform;
                transition: .3s transform;
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                margin-bottom: 40px;
                border: 1px solid #e8e8e8;
                cursor: pointer;
                box-shadow: 0px 7px 25px #eaeaea;
                .admin-list-img {
                    text-align: center;
                    padding: 40px 27px 30px 27px;
                    .titlle{
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                        height: 41px;
                        font-size: 16px;
                        line-height: 20px;
                        text-align: center;
                        color: $title-gray;
                    }
                    .caseIntro{
                        margin: 8px 0;
                        overflow : hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        text-align: center;
                        height: 50px;
                        line-height: 17px;
                        color: $title-gray;
                    }
                    &>img{
                        width: 100%;
                        max-height: 100px;
                    }
                    .admin-btn-box {
                        position: absolute;
                        right: 8px;
                        bottom: 10px;
                        color: #fff;
                        width: 20px;
                        height: 20px;
                    }
                }
                &:hover{
                transform: scale(1.05);
                transition: all 0.3s;
                }
            }
        }
        .emptyList{
            margin: 200px auto;
            width: 240px;
            height: 400px;
            &>p{
                margin: 30px 0;
                text-align: center;
                color: #9999;
                font-size: 16px;
            }
        }
    }
</style>
